<script setup>
import { ref, computed, provide, watch, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import CategoryMenu from './components/CategoryMenu.vue'
import Grid from '@/assets/svg/Grid.vue'
import List from '@/assets/svg/List.vue'
import { useCommonStore } from '@/stores'
import { getGoodsCategoryApi } from '@/api'

const route = useRoute()
const selectedGame = computed(() => useCommonStore().selectedGame)
const selectedArea = computed(() => useCommonStore().selectedArea)

const state = ref({
  checked: true,
  is_available: true,
})
const layout = ref('list') // 布局类型，默认为列表布局, 可选值为 'list' 和 'grid'
const categoryList = ref([])
const layoutChange = (str) => {
  layout.value = str
}
const getCategoryList = () => {
  getGoodsCategoryApi({
    game_id: selectedGame.value.key,
    area_id: selectedArea.value.key,
  }).then((res) => {
    categoryList.value = res
  })
}
// 监听区域变化
watch(
  () => selectedArea.value,
  () => {
    getCategoryList()
  },
)
onMounted(() => {
  getCategoryList()
})
// 给子页面传递数据
provide('state', state)
provide('layout', layout)
provide('categoryList', categoryList)
</script>
<template>
  <div class="bg-gray-50">
    <div class="max-w-[1200px] mx-auto max-[1200px]:p-3">
      <div class="leading-loose pt-2 pb-2">
        YASGAMERS > {{ selectedGame.label }}
        <span v-if="selectedGame.label"> > {{ selectedArea.label }} </span>
      </div>
      <div
        class="p-6 flex gap-2 items-center justify-between bg-white border border-gray-200 mb-5 max-[750px]:p-3"
      >
        <div class="text-3xl max-[750px]:text-[16px]">
          {{ selectedGame.label }}
        </div>
        <div class="flex gap-3 items-center" v-if="route.name !== 'gamesCategory'">
          <!-- <div class="flex items-center gap-2 max-[750px]:flex-col">
            <span class="max-[750px]:text-[12px]">Show Variants As List</span>
            <a-switch v-model:checked="state.checked" size="small" />
          </div> -->
          <div class="flex items-center gap-2 max-[750px]:flex-col">
            <span class="max-[750px]:text-[12px]">Hide Out-of-stock</span>
            <a-switch v-model:checked="state.is_available" size="small" />
          </div>
          <List
            :checked="layout === 'list'"
            @click="layoutChange('list')"
            class="max-[750px]:hidden"
          />
          <Grid
            :checked="layout === 'grid'"
            @click="layoutChange('grid')"
            class="max-[750px]:hidden"
          />
        </div>
      </div>
      <div class="flex gap-5 pb-20 items-start">
        <CategoryMenu ref="cateRef" class="max-[750px]:hidden" :list="categoryList" />
        <div class="flex-1">
          <router-view></router-view>
        </div>
      </div>
      <!-- Diablo II Resurrected - 20 Years Classic in new light -->
      <!-- <div class="bg-white border border-gray-200 p-8 max-[750px]:p-3">
        <div class="text-3xl text-center mb-3 max-[750px]:text-xl">
          Diablo II Resurrected - 20 Years Classic in new light
        </div>
        <div class="leading-loose">
          If you’re new to Sanctuary and want to find out more about monsters, runewords or items,
          you’ll find an encyclopedia of information here. For those unsure about which Diablo II
          character build to create, we’ve all the stats needed to help you make an informed
          decision. Meanwhile, for players with a bit more know-how we’ve also got some handy Diablo
          II tips and tricks. These include our thoughts on which runewords we think would be best
          for each character, which monsters we believe are the most annoying, and how best to find
          the rune, gem or charm you’re after. Looking to get the opinion of fellow gamers on your
          Diablo II gameplay tactics, or are you in search of teammates for the next Ladder reset?
          If so, we’ve compiled a list of the top Diablo II forums for you to join. On this site,
          you’ll also find technical help to improve your gameplay experience, and news about Diablo
          II. We update the content regularly, so there’s something new for you to discover every
          time you visit. So, what are you waiting for? Come and have a look around and discover
          everything you wanted to know about Diablo II, and more. You better start by having a look
          on our list of Diablo 2 Builds.
        </div>
      </div> -->
      <!-- Builds Monsters & Bosses Info -->
      <!-- <div class="grid grid-cols-3 gap-5 pt-15 pb-15 max-[750px]:grid-cols-1">
        <div class="bg-white pt-8 pb-8 border border-gray-200">
          <div class="text-3xl text-center mb-5 max-[750px]:text-xl">Builds</div>
          <div class="flex flex-col gap-5 pl-3 pr-3">
            <div
              class="flex gap-5 items-center cursor-pointer"
              v-for="item in 3"
              :key="'builds' + item"
            >
              <div class="w-[45%] pb-[22%] relative max-[750px]:w-[100%] max-[750px]:pb-[50%]">
                <img
                  src="@/assets/icons/category-1920.jpg"
                  alt=""
                  class="w-full h-full object-cover absolute"
                />
              </div>
              <span class="max-[750px]:hidden"> Builds </span>
            </div>
          </div>
        </div>
        <div class="bg-white pt-8 pb-8 border border-gray-200">
          <div class="text-3xl text-center mb-5 max-[750px]:text-xl">Monsters & Bosses</div>
          <div class="flex flex-col gap-5 pl-3 pr-3">
            <div
              class="flex gap-5 items-center cursor-pointer"
              v-for="item in 3"
              :key="'Monsters' + item"
            >
              <div class="w-[45%] pb-[22%] relative max-[750px]:w-[100%] max-[750px]:pb-[50%]">
                <img
                  src="@/assets/icons/category-1920.jpg"
                  alt=""
                  class="w-full h-full object-cover absolute"
                />
              </div>
              <span class="max-[750px]:hidden"> Monsters & Bosses </span>
            </div>
          </div>
        </div>
        <div class="bg-white pt-8 pb-8 border border-gray-200">
          <div class="text-3xl text-center mb-5 max-[750px]:text-xl">Info</div>
          <div class="flex flex-col gap-5 pl-3 pr-3">
            <div
              class="flex gap-5 items-center cursor-pointer"
              v-for="item in 3"
              :key="'Info' + item"
            >
              <div class="w-[45%] pb-[22%] relative max-[750px]:w-[100%] max-[750px]:pb-[50%]">
                <img
                  src="@/assets/icons/category-1920.jpg"
                  alt=""
                  class="w-full h-full object-cover absolute"
                />
              </div>
              <span class="max-[750px]:hidden"> Info </span>
            </div>
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>
<style lang="scss" scoped>
.ant-switch.ant-switch-checked,
.ant-switch.ant-switch-checked:hover {
  background-color: #f9a044 !important;
}
</style>
